<template>
			<view class="item" @click="$emit('goDetail',item.id)">
				<view class="top">
					<image class="img" :src="item.coverImg" mode=""></image>
					<view class="words">
						<view class="name">
							{{item.resourceName}}
						</view>
						<view v-if="isshowmoney">
							<view class="status" v-if='item.isBuy==1'>已购买</view>
							<view class="periceStatus" v-if='item.isBuy==0'>
								<text>￥</text>
								<view>{{item.coursePrice}}</view>
							</view>	
						</view>
						<view class="free" v-if='item.coursePrice==0'>免费</view>
					</view>
				</view>
				<view class="down">
					<view class="left">
						讲师：<text>{{item.lecturerName}}</text>
					</view>
					<view class="right">
						<view class="icon">
							<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/watch.png"></image>
							<text>{{item.watchNum}}</text>
						</view>
						<view class="icon">
							<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/praiseIcon.png"></image>
							<text>{{item.greatNum}}</text>
						</view>
					</view>
				</view>
			</view>
</template>

<script>
	export default {
		props:{
			item:{
				type:Object,
			}
		},
		data() {
			return {
				isios:false,
				isshowmoney:false
			}
		},
		mounted() {
			let that = this
			uni.getSystemInfo({
				success: function(res) {
					if(res.platform == 'ios'){
						that.isios = true
					}
				}
			})
			if(this.item.flag && this.isios){
				this.isshowmoney = false
			}else{
				this.isshowmoney = true
			}
		}
	}
</script>

<style scoped lang="scss">
	
		.item {
			height: 240rpx;
			padding: 25rpx 25rpx 16rpx 25rpx;
			background: #FFFFFF;
			box-shadow: 0 7rpx 27rpx 0 rgba(127, 129, 133, 0.15);
			border-radius: 20rpx;
			margin-bottom: 24rpx;
	
			.top {
				display: flex;
				width: 100%;
				overflow: hidden;
				box-sizing: border-box;
				text-overflow: ellipsis;
				.img {
					width: 220rpx;
					height: 147rpx;
					border-radius: 15rpx;
				}
	
				.words {
					width: 100%;
					margin-left: 31rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					.name {
						font-size: 30rpx;
						font-weight: 500;
						color: #111111;
					}
	
					.status {
						font-size: 26rpx;
						font-weight: 500;
						color: #B0B0B0;
					}
					.periceStatus{
						display: flex;
						align-items: baseline;
						font-size: 36rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #FFA025;
						&>text{
							font-size: 22rpx;
						}
					}
					.free{
						font-size: 36rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #194FC9;
					}
				}
			}
	
			.down {
				margin-top: 25rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
	
				.left {
					font-size: 26rpx;
					color: #4A4A4A;
	
					&>text {
						color: #B2B2B2;
					}
				}
	
				.right {
					display: flex;
					align-items: center;
	
					.icon {
						margin: 0 25rpx;
	
						&>image {
							width: 27rpx;
							height: 17rpx;
						}
	
						&>text {
							font-size: 24rpx;
							color: #B0B0B0;
						}
					}
				}
			}
		}
</style>
